<template>
    <a-drawer :title="title" :open="true" :width="width" :confirm-loading="loading" @ok="submitVisible"
        @close="cancelVisible" :maskClosable="false" :closable="false">
        <template #extra>
            <close-outlined @click="cancelVisible" />
        </template>
        <a-spin :spinning="loading" tip="Loading...">
            <slot />
        </a-spin>
        <template #footer>
            <div class="footer" v-if="footer">
                <div class="footer_item">
                    <div class="flex-item">
                        <slot name="msg" />
                    </div>
                    <a-button v-if="isCancel" style="marginRight: 8px" @click="cancelVisible">
                        {{ cancelText }}
                    </a-button>
                    <a-button v-if="isReset" style="marginRight: 8px" @click="resetHandle">
                        重 置
                    </a-button>
                    <a-button type="primary" v-if="isSure" :loading="loading" @click="submitVisible">
                        {{ submitText }}
                    </a-button>
                    <slot name="extra" />
                </div>
            </div>
        </template>
    </a-drawer>
</template>

<script setup lang="ts">
import {
    CloseOutlined
} from '@ant-design/icons-vue';
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '500px'
    },
    loading: {
        type: Boolean,
        default: false
    },
    footer: {
        type: Boolean,
        default: true
    },
    isSure: {
        type: Boolean,
        default: true
    },
    isCancel: {
        type: Boolean,
        default: true
    },
    isReset: {
        type: Boolean,
        default: false
    },
    cancelText: {
        type: String,
        default: "取 消"
    },
    submitText: {
        type: String,
        default: "确 定"
    }
})
const emit = defineEmits(['cancel', 'submit', 'reset'])
//取消
const cancelVisible = () => {
    if (props.loading) return false;
    emit('cancel');
}
//确定
const submitVisible = () => {
    emit('submit');
}
//重置
const resetHandle = () => {
    emit('reset')
}
</script>
<style lang="scss" scoped>
.footer {
    .footer_item {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: var(--menu-color);
        border-radius: 0 0 4px 4px;
        z-index: 9
    }
}
</style>
